<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/storage.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
      	      	
      	      	//所有的H5+的代码必须放到plusReady方法里执行
      	      	mui.plusReady(function(){
      	      		
      	      		//初始化页面
      	      		initPage();
      	      		
      	      		//直接定位
      	      		plus.geolocation.getCurrentPosition(function(e){
      	      			//定位成功的回调
      	      			
      	      			//定位后的位置信息
      	      			var coords = e.coords;
      	      			//纬度
      	      			var lat = coords.latitude;
      	      			//经度
      	      			var lon = coords.longitude;
      	      			console.log("经纬度：" + lat + "  " + lon);
      	      			saveLocation(lat, lon);
      	      			
      	      			//获得当前定位的坐标系
      	      			var ctype = e.coordsType;
      	      			console.log("坐标系：" + ctype);
      	      			
      	      			//获得当前定位的城市
      	      			var city = e.address.city;
      	      			console.log("定位的城市：" + city);
      	      			saveCityName(city);
      	      			
      	      		}, function(){
      	      			//定位失败的回调
      	      		}, {
      	      			provider: "baidu",
      	      			coordsType: "bd09ll"
      	      		});
      	      		
      	      		
      	      		//给选择城市的按钮设置点击事件
      	      		document.getElementById("cityA").addEventListener("tap", function(){
      	      			
      	      			//console.log("跳转到城市选择页面！");
      	      			mui.openWindow({
      	      				url: "select_city.html",
      	      				id: "select_city.html"
      	      			})
      	      			
      	      		});
      	      		
      	      	});
      	      	
      	      	//保存城市
      	      	function saveCityName(cityName){
      	      		if(cityName){
      	      			//保存到硬盘
      	      			saveCity(cityName);
      	      			//更新页面上城市的显示
      	      			document.getElementById("cityA").innerHTML = cityName;
      	      		}
      	      	}
      	      	
      	      	//初始化首页的4个页面
      	      	function initPage(){
      	      		
      	      		var pages = ["page_home.html", "page_msg.html", "page_discover.html", "page_me.html"];
      	      		
      	      		//获得当前页面，将4个子页面循环添加到当前页上
      	      		var cpage = plus.webview.currentWebview();
      	      		
      	      		var pageStytle = {
      	      			"top": 45,
      	      			"bottom": 50
      	      		};
      	      		
      	      		for(var i = 0; i < pages.length; i++){
      	      			//创建4个子页面
      	      			var spage = plus.webview.create(pages[i], pages[i], pageStytle);
      	      			if(i != 0)
      	      				spage.hide();//隐藏子页面
      	      				
      	      			//将子页面追加到父页面上
      	      			cpage.append(spage);
      	      		}
      	      		
      	      		//设置4个tab按钮的点击事件
      	      		mui('.mui-bar-tab').on('tap', '.mui-tab-item', function(){
      	      			var index = this.getAttribute("index");
      	      			
      	      			//获得对应的子页面
      	      			for(var i = 0; i < pages.length; i++){
      	      				
      	      				var spage = plus.webview.getWebviewById(pages[i]);
      	      				
      	      				if(i == index){
      	      					spage.show();
      	      				} else {
      	      					spage.hide();
      	      				}
      	      			}
      	      		});
      	      		
      	      	}
		
	
    </script>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a id="cityA" style="color: black; font-size: 17px; line-height: 40px;">选择城市</a>
		<h1 class="mui-title">酒店预订</h1>
	</header>
	
	
	<nav class="mui-bar mui-bar-tab">
		    <a class="mui-tab-item mui-active" index="0">
		        <span class="mui-icon mui-icon-home"></span>
		        <span class="mui-tab-label">首页</span>
		    </a>
		    <a class="mui-tab-item" index="1">
		        <span class="mui-icon mui-icon-chatboxes"></span>
		        <span class="mui-tab-label">消息</span>
		    </a>
		    <a class="mui-tab-item" index="2">
		        <span class="mui-icon mui-icon-search"></span>
		        <span class="mui-tab-label">搜索</span>
		    </a>
		    <a class="mui-tab-item" index="3">
		        <span class="mui-icon mui-icon-person"></span>
		        <span class="mui-tab-label">我的</span>
		    </a>
		</nav>
</body>
</html>